<template>
  <div id="intro">
    <div class="max-width container pt-0">
      <h1 class="title">{{ $t(`intro.标题`) }}</h1>

      <!-- 介绍列表 -->
      <ul>
        <li class="item radius p-30 mt-20" v-for="(v, i) in intros" :key="i">
          <div class="inline radius p-10 bcl-primary">
            <img style="width: 35px" :src="v.icon" />
          </div>

          <div class="fz-18 fw-bold cl-black mt-15">
            {{ $t(`intro.${i + 1}.标题`) }}
          </div>

          <ul class="fz-14 cl-basic pl-5" style="list-style: square">
            <li class="mt-15" v-for="(c, cIndex) in v.intros" :key="cIndex">
              {{ $t(`intro.${i + 1}.介绍${cIndex + 1}`) }}
            </li>
          </ul>
        </li>
      </ul>

      <!-- 功能区 -->
      <base-function></base-function>

      <!-- 预售 -->
      <!-- <div id="sell">
        <h1 class="title">{{ $t(`intro.sell.标题`) }}</h1>

        <div class="max-width max-width--sm">
          <div class="detail-box">
            <div class="cl-black">
              <div class="fz-20 fw-bold">{{ $t(`intro.sell.预售地址`) }}</div>
              <div class="mt-10 mb-15 fz-16">
                {{ $store.state.contractAddress }}
              </div>
            </div>
            <el-button
              type="primary"
              @click="copyAddress($store.state.contractAddress)"
            >
              {{ $t(`intro.sell.复制地址`) }}
            </el-button>
          </div>

          <div class="fz-14 cl-basic ta-center mt-30">
            <div>
              <span>{{ $t(`intro.sell.预售数量`) }}：</span>
              <span>1,000,000 GOLD</span>
            </div>

            <div>
              <span>{{ $t(`intro.sell.预售价格`) }}：</span>
              <span>1 BNB = 1,000 GOLD</span>
            </div>

            <div class="mb-10 mt-10">{{ $t(`intro.sell.提示1`) }}</div>

            <div>{{ $t(`intro.sell.提示2`) }}</div>
          </div>
        </div>
      </div> -->

      <!-- 交易所 -->
      <div id="exchange">
        <h1 class="title">{{ $t(`intro.exchange.标题`) }}</h1>

        <ul class="max-width max-width--sm flex flex-wrap">
          <li
            class="ta-center mb-15"
            style="width: 25%"
            v-for="(v, i) in 8"
            :key="i"
          >
            <img
              class="inline"
              style="width: 45%; max-width: 65px"
              :src="require(`@/assets/img/icon_${i + 1}.png`)"
            />
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import baseFunction from '@/components/base_function.vue'

export default {
  data() {
    return {
      intros: [
        {
          icon: require('@/assets/img/5.svg'),
          intros: 3,
        },
        {
          icon: require('@/assets/img/6.svg'),
          intros: 4,
        },
      ],

      exchanges: [],
    }
  },

  methods: {
    copyAddress(address) {
      this.$copyText(address).then(() => {
        this.$message.success(this.$t(`common.复制成功`))
      })
    },
  },

  components: {
    baseFunction,
  },
}
</script>

<style lang="scss" scoped>
#intro {
  .item {
    transition: all 0.5s ease;
    background-color: #f2effc;

    &:hover {
      background-color: var(--color-primary);
      color: white;

      .cl-basic {
        color: white !important;
      }
    }
  }
}
</style>
